property-information

What is property-information?

The property-information npm package provides utilities for working with HTML and SVG properties, attributes, and their corresponding information. It helps in understanding the relationships between properties and attributes, and how they should be used in the context of HTML and SVG elements.

What are property-information's main functionalities?

Get Property Information

This feature allows you to retrieve detailed information about a specific property or attribute. In this example, we are fetching information about the 'className' property.

const propertyInformation = require('property-information');
const info = propertyInformation.find('className');
console.log(info);

Check if Property is Boolean

This feature helps you determine if a property is a boolean attribute. In this example, we check if the 'checked' property is a boolean.

const propertyInformation = require('property-information');
const isBoolean = propertyInformation.boolean.includes('checked');
console.log(isBoolean);

Get All Properties for a Specific Element

This feature provides all properties and attributes for HTML elements. In this example, we retrieve all properties related to HTML elements.

const propertyInformation = require('property-information');
const properties = propertyInformation.html;
console.log(properties);

Other packages similar to property-information

html-element-attributes

The html-element-attributes package provides a comprehensive list of HTML element attributes and their corresponding information. It is similar to property-information but focuses solely on HTML attributes without SVG support.

html-attributes

The html-attributes package offers a list of standard HTML attributes and their details. It is similar to property-information but does not provide as detailed information about the relationships between properties and attributes.

svg-element-attributes

The svg-element-attributes package provides information about SVG element attributes. It is similar to property-information but focuses exclusively on SVG attributes.

README

property-information

Information for HTML properties.

Installation

npm:

npm install property-information

Usage

var info = require('property-information');

console.log(info('class'));

Yields:

{
  "name": "class",
  "propertyName": "className",
  "mustUseAttribute": true,
  "mustUseProperty": false,
  "boolean": false,
  "overloadedBoolean": false,
  "numeric": false,
  "positiveNumeric": false,
  "commaSeparated": false,
  "spaceSeparated": true
}

API

propertyInformation(name)

Get information for a DOM property by (case-insensitive) name.

Returns an Information object, if available.

propertyInformation.all

Object mapping case-insensitive names to Information objects. This gives raw access to the information returned by propertyInformation(): do not change the objects.

Information

Object:

• name (string) — Case-insensitive name
• propertyName (string) — Case-sensitive IDL attribute (e.g., a class attribute is added in HTML and a className is added in Web IDL)
• mustUseAttribute (boolean) — Whether setAttribute must be used when patching a DOM node
• mustUseProperty (boolean) — Whether node[propertyName] must be used when patching a DOM node
• boolean (boolean) — Whether the value of the property is boolean
• overloadedBoolean (boolean) — Whether the value of the property can be boolean
• numeric (boolean) — Whether the value of the property is number
• positiveNumeric (boolean) — Whether the value of the property is number and positive
• spaceSeparated (boolean) — Whether the value of the property is a space-separated list
• commaSeparated (boolean) — Whether the value of the property is a comma-separated list

Note that some values can be both *Separated and a primitive, in that case each of the tokens should be regarded as a primitive. For example, itemScope is both spaceSeparated and boolean:

{
  "name": "itemscope",
  "propertyName": "itemScope",
  "mustUseAttribute": true,
  "mustUseProperty": false,
  "boolean": true,
  "overloadedBoolean": false,
  "numeric": false,
  "positiveNumeric": false,
  "commaSeparated": false,
  "spaceSeparated": true
}

License

MIT © Titus Wormer

Derivative work based on React licensed under BSD-3-Clause-Clear, © 2013-2015, Facebook, Inc.